<div class="form-field" ng-class="{'editing': editState.field == formElement}" ng-switch="formElement.type">

  <div class="actions" ng-show="(!formMode || formMode != 'read')">
    <button class="btn btn-clean" ng-click="openFieldPopover()"><i class="glyphicon glyphicon-pencil"></i></button>
    <button class="btn btn-clean" ng-click="removeFormElement(formElement)"><i class="icon icon-remove"></i></button>
  </div>

  <div class="form-group" ng-switch-when="text">
    <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                    ng-if="formElement.required">*</span>
    <input class="form-control" disabled style="cursor:default;background-color:#fff;" type="text" value="Text">
  </div>

  <div class="form-group" ng-switch-when="password">
    <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                    ng-if="formElement.required">*</span>
    <input class="form-control" disabled style="cursor:default;background-color:#fff;" type="text" value="Password">
  </div>

  <div class="form-group" ng-switch-when="multi-line-text">
    <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                    ng-if="formElement.required">*</span>
    <textarea class="form-control" disabled rows="4" style="cursor:default;background-color:#fff;"
              value="Text"></textarea>
  </div>

  <div class="form-group" ng-switch-when="date">
    <label class="control-label form-field-label"><i class="glyphicon glyphicon-calendar"></i> {{formElement.name}}
      <span class="marker" ng-if="formElement.required">*</span></label>
    <input class="form-control" disabled name="date" type="text">
  </div>

  <div class="checkbox" ng-switch-when="boolean" style="padding-left:0;">
    <label class="control-label form-field-label"></label>
    <div style="padding-left: 20px;">
      <input class="checkbox-inline" disabled type="checkbox">{{formElement.name}} <span class="marker"
                                                                                         ng-if="formElement.required">*</span>
    </div>
  </div>

  <div class="form-group" ng-switch-when="radio-buttons">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <div class="radio" ng-repeat="option in formElement.options"
         ng-show="formElement.options && formElement.options.length > 0">
      <label>
        <input disabled id="optionsRadios{{$index}}" name="optionsRadios" ng-checked="formElement.value == option.name"
               type="radio" value="option{{$index}}">{{option.name}}</input>
      </label>
    </div>
    <div class="radio"
         ng-show="!formElement.options && formElement.options.length === 0 && !formElement.optionsExpression">
      <label>
        <input disabled id="optionsRadios1" name="optionsRadios" type="radio" value="option1">
        Option 1
      </label>
    </div>
    <div ng-show="formElement.optionsExpression" ng-style="{'font-size': '1em'}">
      <label>
        <input disabled id="optionsRadios1" name="optionsRadios" type="radio" value="none">
        {{formElement.optionsExpression}}
        </input>
      </label>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="form-group" ng-switch-when="integer">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <input class="form-control" disabled style="cursor:default;background-color:#fff;" type="number" value="123">
  </div>

  <div class="form-group" ng-switch-when="decimal">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <input class="form-control" disabled style="cursor:default;background-color:#fff;" type="number" value="123.12">
  </div>

  <div class="form-group" ng-switch-when="dropdown">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <select class="form-control" disabled style="cursor:default;">
      <option>Select...</option>
    </select>
  </div>

  <div class="form-group" ng-switch-when="people">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <div class="input-group">
      <span class="input-group-addon"><i class="icon icon-user-add"></i></span>
      <input class="form-control" disabled placeholder="{{'FORM-BUILDER.LABEL.PERSON' | translate}}"
             style="cursor:default;background-color:#fff;" type="text" value="{{formElement.placeholder}}">
    </div>
  </div>

  <div class="form-group" ng-switch-when="functional-group">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <div class="input-group">
      <span class="input-group-addon"></span>
      <input class="form-control" placeholder="{{'FORM-BUILDER.LABEL.FUNCTIONAL-GROUP' | translate}}"
             style="cursor:default;background-color:#fff;"
             type="text" value="{{formElement.placeholder}}">
    </div>
  </div>

  <div class="form-group" ng-switch-when="upload">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                             ng-if="formElement.required">*</span></label>
    <div class="input-group clearfix">
      <span class="input-group-addon"><i class="icon icon-folder"></i></span>
      <input class="form-control" disabled style="cursor:default;background-color:#fff;"
             type="text" value="Upload or import content...">
    </div>
  </div>

  <div class="form-group" ng-switch-when="hyperlink">
    <label class="control-label form-field-label">{{formElement.name}}<span class="marker" ng-if="formElement.required">*</span></label>
    <div class="message" ng-show="formElement.params.hyperlinkUrl">{{formElement.params.hyperlinkUrl}}</div>
  </div>

  <div class="form-group" ng-switch-when="spacer">
    <br/>
  </div>

  <div class="form-group" ng-switch-when="horizontal-line">
    <hr>
  </div>

  <div class="form-group" ng-switch-when="headline">
    <h4><strong>{{formElement.name}}</strong></h4>
  </div>

  <div class="form-group" ng-switch-when="headline-with-line">
    <h4><strong>{{formElement.name}}</strong></h4>
    <hr>
  </div>

  <div class="form-group" ng-switch-when="expression">
    <div class="message" ng-style="{'font-size': formElement.params.size + 'em'}">
      <div ng-show="formElement.expression && formElement.expression.length > 0">
        {{formElement.expression}}
      </div>
      <div ng-show="!formElement.expression || formElement.expression.length == 0">
        {{'FORM-BUILDER.MESSAGE.EMPTY-EXPRESSION' | translate}}
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
